<template>
  <div class="Merchant">
    <div class="header">
      <van-nav-bar title="申请入驻" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
    </div>
    <div class="Merchant_con" v-show="shopShow">
          <div class="page-content">
            <div class="page-content_div">
              <div class="Merchant_add">
                <p><span>*</span>项目分类</p>
                <div class="xiala">
                  <input type="text" placeholder="选择办理" :value="radioData"  readonly="readonly" @click="addressShow()">
                  <van-icon name="arrow-down"/>
                </div>
              </div>
             <div class="Merchant_add">
               <p><span>*</span>农庄名称</p>
               <input type="text" placeholder="请输入店铺名称" v-model.trim='formData.aname'/>
             </div>
            <div class="Merchant_add">
                    <p><span>*</span>联系电话</p>
                    <p style="color: #01bf47;">{{formData.aphone}}</p>
                  </div>
              <div class="Merchant_add">
                <p><span>*</span>省 市 区</p>
                <div  class="nesAddress_select" @click="addShow()">
                  <p>{{province_name||'请选择'}}</p>
                  <van-icon name="arrow-down"/>
                </div>
                <div  class="nesAddress_select" @click="addShow1()">
                  <p>{{city_name}}</p>
                  <van-icon name="arrow-down"/>
                </div>
                <div  class="nesAddress_select" @click="addShow2()">
                  <p>{{district_name}}</p>
                  <van-icon name="arrow-down"/>
                </div>
              </div>
              <div class="Merchant_add">
                <p><span>*</span>详细地址</p>
                <input class="Merchant_add_con1_input" type="text" placeholder="请输入详细地址" v-model.trim='formData.address'/>
                <p class="Merchant_add_con1_p2" @click="testUp()">地图标记<van-icon name="arrow" /></p>
              </div>
              <div class="Merchant_add">
                <p>&nbsp;&nbsp;&nbsp;支付宝账号</p>
                <input type="text" placeholder="请输入支付宝账号" v-model.trim='formData.alipay'/>
              </div>
              <div class="Merchant_add">
                <p>&nbsp;&nbsp;&nbsp;微信账号</p>
                <input type="text" placeholder="请输入微信账号" v-model.trim='formData.wechat'/>
              </div>
            </div>
          </div>
          <div class="Merchant_name">
            <ul>
              <li>
                <p>&nbsp;&nbsp;&nbsp;法人姓名</p>
                <input type="text" placeholder="请输入法人姓名" v-model.trim='formData.userName'/>
              </li>
              <li>
                <p>&nbsp;&nbsp;&nbsp;法人证件</p>
                <input type="text" placeholder="请输入法人证件" v-model.trim='formData.id_card_number'/>
              </li>
            </ul>
          </div>
          <div class="Merchant_foot">
            <div>
              <img :src="formData.avatarshow2?formData.avatarshow2:require('../../../static/img/user/bjtu.png')" @click="setAvatar2">
              <input type="file" name="avatar2" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none;width: 0.7rem;height:0.7rem;" @change="changeImage2($event)" ref="avatarInput2" >
              <p>营业执照</p>
            </div>
            <div>
              <img :src="formData.avatarshow?formData.avatarshow:require('../../../static/img/user/bjtu.png')" @click="setAvatar" >
              <input type="file" name="avatar" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none;width: 0.7rem;height:0.7rem;" @change="changeImage($event)" ref="avatarInput" >
              <p>身份证正面</p>
            </div>
            <div>
              <img :src="formData.avatarshow1?formData.avatarshow1:require('../../../static/img/user/bjtu.png')" @click="setAvatar1">
              <input type="file" name="avatar1" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none;width: 0.7rem;height:0.7rem;" @change="changeImage1($event)" ref="avatarInput1" >
              <p>身份证反面</p>
            </div>
            <div>
              <img :src="formData.avatarshow3?formData.avatarshow3:require('../../../static/img/user/bjtu.png')" @click="setAvatar3">
              <input type="file" name="avatar3" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none;width: 0.7rem;height:0.7rem;" @change="changeImage3($event)" ref="avatarInput3" >
              <p>手持身份证</p>
            </div>
          </div>

      <div class="Merchant_bottom">
        <van-checkbox v-model="setDefault" checked-color="#07c160">我已认真阅读并同意
          <span class="Merchant_bottom_span" @click="tofuwu()">《农庄入驻协议》</span></van-checkbox>
      </div>
      <button class="Merchant_button" :disabled="!setDefault" :class="setDefault ? 'yf_button' : 'Complaints_button'" @click="saveAddress()">确认</button>
    </div>
    <div class="Merchant_con" v-show="shopShows">
          <div class="page-content">
            <div class="page-content_div">
              <div class="Merchant_add">
                <p><span>*</span>项目分类</p>
                <div class="xiala">
                  <p v-if="myFarmShopList.product_type_id==1">普通店铺</p>
                  <p v-if="myFarmShopList.product_type_id==2">高级店铺</p>
                  <p v-if="myFarmShopList.product_type_id==3">农产品农庄</p>
                  <p v-if="myFarmShopList.product_type_id==4">民宿</p>
                  <p v-if="myFarmShopList.product_type_id==5">农家乐餐饮</p>
                  <p v-if="myFarmShopList.product_type_id==6">综合大型农庄</p>
                </div>
              </div>
              <div class="Merchant_add">
                <p><span>*</span>农庄名称</p>
                <p class="mark">{{myFarmShopList.company_name}}</p>
              </div>
              <div class="Merchant_add">
                <p><span>*</span>联系电话</p>
                <p class="mark">{{myFarmShopList.phone}}</p>
              </div>
              <div class="Merchant_add">
                <p><span>*</span>省 市 区</p>
                <div  class="nesAddress01">
                  <span>{{myFarmShopList.province}}</span>
                  <span>{{myFarmShopList.city}}</span>
                  <span>{{myFarmShopList.country}}</span>
                </div>
              </div>
              <div class="Merchant_add">
                <p><span>*</span>详细地址</p>
                <p class="mark">{{myFarmShopList.other_address}}</p>
              </div>
              <div class="Merchant_add">
                <p>&nbsp;&nbsp;&nbsp;支付宝账号</p>
                <p class="mark">{{myFarmShopList.other_address}}</p>
              </div>
              <div class="Merchant_add">
                <p>&nbsp;&nbsp;&nbsp;微信账号</p>
                <p class="mark">{{myFarmShopList.other_address}}</p>
              </div>

            </div>
          </div>
          <div class="Merchant_name">
            <ul>
              <li>
                <p>&nbsp;&nbsp;&nbsp;法人姓名</p>
                <p class="mark">{{myFarmShopList.real_name}}</p>
              </li>
              <li>
                <p>&nbsp;&nbsp;&nbsp;法人证件</p>
                <p class="mark">{{myFarmShopList.id_card_number}}</p>
              </li>
            </ul>
          </div>
          <div class="Merchant_foot">
            <div>
              <img :src="myFarmShopList.business_image_url?myFarmShopList.business_image_url:require('../../../static/img/user/bjtu.png')">
              <p>营业执照</p>
            </div>
            <div>
              <img :src="myFarmShopList.id_card_front_image_url?myFarmShopList.id_card_front_image_url:require('../../../static/img/user/bjtu.png')" >
              <p>身份证正面</p>
            </div>
            <div>
              <img :src="myFarmShopList.id_card_back_image_url?myFarmShopList.id_card_back_image_url:require('../../../static/img/user/bjtu.png')">
              <p>身份证反面</p>
            </div>
            <div>
              <img :src="myFarmShopList.id_card_hand_image_url?myFarmShopList.id_card_hand_image_url:require('../../../static/img/user/bjtu.png')">
              <p>手持身份证</p>
            </div>
          </div>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-radio-group v-model="radioData">
        <p class="p1">请选择</p>
        <ul class="yi">
          <li v-for="(item, index) in classificationList">
            <van-radio :name="item.remark" checked-color="#07c160" @click="OK()">{{item.remark}}</van-radio>
          </li>
        </ul>
      </van-radio-group>
    </van-popup>
    <van-popup v-model="provinceShow" position="bottom">
      <div class="province">
        <div
          v-for="(item,index) in provinceList"
          :key="index"
          @click="provinceMethod(item)"
          :class="item.select?'mark':''"
        >{{item.name}}</div>
      </div>
    </van-popup>
    <van-popup v-model="cityShow" position="bottom">
      <div class="city">
        <div
          v-for="(item,index) in cityList"
          :key="index"
          @click="cityMethod(item)"
          :class="item.select?'mark':''"
        >{{item.name}}</div>
      </div>
    </van-popup>
    <van-popup v-model="districtShow" position="bottom">
      <div class="district">
        <div
          v-for="(item,index) in districtList"
          :key="index"
          @click="districtMethod(item)"
          :class="item.select?'mark':''"
        >{{item.name}}</div>
      </div>
    </van-popup>

    <!-- 选择所在位置的弹框-->
    <div v-show="ModifyPassword_up" class="dynamic_iframe" style="z-index: 100">
      <div id="iframe">
        <iframe style="height: 7.4rem;width: 100%;border: 0;background-color:#fff" id="getAddress" @load="loadiframe"
                src="https://m.amap.com/picker/?key=e6e83fe39e523eeaae84a5fbbef25526"></iframe>
      </div>
    </div>
  </div>
</template>

<script>
  import district from "../../common/district";
  export default {
    name: "Merchant",
    data() {
      return {
        provinceShow:false,
        cityShow:false,
        districtShow:false,
        active: 0,
        setDefault:true,//记录是否设为默认地址
        ModifyPassword_up:false,
        show:false,
        classificationList: [],
        radioData:'',
        formData: {
          avatar:'',
          avatarshow:'',
          avatar1:'',
          avatarshow1:'',
          avatar2:'',
          avatarshow2:'',
          avatar3:'',
          avatarshow3:'',
          aname: '',
          address: '',
          aphone:JSON.parse(localStorage.getItem('userInfo')).phone,
          userName:'',
          id_card_number:'',
          alipay:'',
          wechat:'',
        },
        //位置搜索列表
        provinceList: district,
        cityList: [],
        districtList: [],
        province_name: "",
        city_name: "",
        district_name: "",
        province_code:"",
        city_code:"",
        district_code:"",
        farmShopStateList:'',
        myFarmShopList:{},
        shopShow:false,
        shopShows:false,
        num:9,
        addressData:[],
      }
    },
    mounted: function () {
      this.getTabList()//页面加载后获取店铺的状态
      this.getMyFarmShop()
      this.getClassification()
    },

    methods:{
      testUp: function () {
        this.ModifyPassword_up=true
      },
      loadiframe() {
        let iframe = document.getElementById('getAddress').contentWindow;
        iframe.postMessage('hello', 'https://m.amap.com/picker/');
        window.addEventListener("message", function (e) {
          //业务代码
          this.ModifyPassword_up=false
          this.formData.address=e.data.address;
          this.addressData=e.data.location.split(",");
          console.log("地图",this.addressData)
        }.bind(this), false);
      },
      //服务规则
      tofuwu(){
        this.$router.push({path: '/serviceRules',query:{id:this.num}})
      },
      //返回
      onClickLeft() {
        this.$router.back();
      },
      addressShow(){
        this.show=true
      },
      OK(){
        this.show=false
      },
      addShow(){
        this.provinceShow=true
      },
      addShow1(){
        this.cityShow=true
      },
      addShow2(){
        this.districtShow=true
      },
      //点击图片(身份证正面)触发该方法
      setAvatar() {
        //获得ref为avatarInput节点，并触发该节点
        this.$refs.avatarInput.click()
      },
      //选择上传图片（身份证正面），并将图片进行处理
      changeImage(e) {
        var file = e.target.files[0]
        var reader = new FileReader()
        var that = this
        that.formData.avatar = file;//对象格式，用于传向后台
        reader.readAsDataURL(file)
        reader.onload = function(e) {
          that.formData.avatarshow = this.result//base64解析，用于页面上图片展示
        }
      },
      //点击身份证背面
      setAvatar1() {
        this.$refs.avatarInput1.click()
      },
      //选择身份证背面
      changeImage1(e) {
        var file = e.target.files[0]
        var reader = new FileReader()
        var that = this
        that.formData.avatar1 = file;
        reader.readAsDataURL(file)
        reader.onload = function(e) {
          that.formData.avatarshow1 = this.result
        }
      },
      //点击营业执照
      setAvatar2() {
        this.$refs.avatarInput2.click()
      },
      //选择营业执照
      changeImage2(e) {
        var file = e.target.files[0]
        var reader = new FileReader()
        var that = this
        that.formData.avatar2 = file;
        reader.readAsDataURL(file)
        reader.onload = function(e) {
          that.formData.avatarshow2 = this.result
        }
      },
      //点击手持身份证
      setAvatar3() {
        this.$refs.avatarInput3.click()
      },
      //选择手持身份证
      changeImage3(e) {
        var file = e.target.files[0]
        var reader = new FileReader()
        var that = this
        that.formData.avatar3 = file;
        reader.readAsDataURL(file)
        reader.onload = function(e) {
          that.formData.avatarshow3 = this.result
        }
      },
      //三级联动选省
      provinceMethod(item) {
        this.provinceList.forEach((item, index) => {
          item.select = false;
        });
        this.cityList.forEach((item, index) => {
          item.select = false;
        });
        this.districtList.forEach((item, index) => {
          item.select = false;
        });
        this.cityList = [];
        this.districtList = [];
        item.select = true;
        this.province_name = item.name;
        this.province_code = item.code;
        this.provinceShow=false;

        this.cityList = item.child;
        this.$forceUpdate();
      },
      cityMethod(item) {
        this.cityList.forEach((item, index) => {
          item.select = false;
        });
        this.districtList.forEach((item, index) => {
          item.select = false;
        });
        item.select = true;
        this.city_name = item.name;
        this.city_code = item.code;
        this.cityShow=false;
        this.districtList = item.child;
        this.$forceUpdate();
      },
      districtMethod(item) {
        this.districtList.forEach((item, index) => {
          item.select = false;
        });
        item.select = true;
        this.district_name = item.name;
        this.district_code = item.code;
        this.districtShow=false;
        this.$forceUpdate();
      },
      //项目分类
      async getClassification() {
        let params = {
          name:"SHOP_TYPE"
        };
        const res = await this.$axios.post(this.$api.typesList, params);
        if (res.success) {
          this.classificationList = res.data;
        } else {
          this.$toast(res.msg);
        }
      },
      //获取店铺的状态
      async getTabList() {
        let params = {

        };
        const res = await this.$axios.post(this.$api.farmShopStateData, params);
        if (res.success) {
          this.farmShopStateList = res.data;
          this.shopShows=true
          this.shopShow=false
        } else {
          this.shopShow=true
          this.shopShows=false
        }
      },
        //农庄入驻和个人认证数据回显
      async getMyFarmShop() {
        let params = {

        };
        const res = await this.$axios.post(this.$api.myFarmShopData, params);
        if (res.success) {
          this.myFarmShopList = res.data;
        } else {
          this.$toast(res.msg);

        }
      },
      //将当前页面表单所有数据发送给后台----请求后台
      saveAddress(){
        //设置作用域
        let this_ = this;
        //将数据放在formDatas中
        const formDatas=new FormData()
        //获得用户信息
        var userList=[]
        var userList=JSON.parse(localStorage.getItem('userInfo'))
        this.userList=userList
        for(var j in this.classificationList){
          if(this.classificationList[j].remark==this.radioData){
            var id=this.classificationList[j].content
            formDatas.append('shop_type',id)//项目分类
          }
        }
        formDatas.append('userId',this.userList.userId)//店铺申请人ID
        formDatas.append('province',this_.province_name)//省
        formDatas.append('city',this_.city_name)//市
        formDatas.append('country',this_.district_name)//区
        formDatas.append('provinceCode',this_.province_code)//省
        formDatas.append('cityCode',this_.city_code)//市
        formDatas.append('countryCode',this_.district_code)//区
        formDatas.append('other_address',this_.formData.address)//详细地址
        formDatas.append('company_name',this_.formData.aname)//农庄名称
        formDatas.append('real_name',this_.formData.userName)//法人姓名
        formDatas.append('phone',this_.formData.aphone)//电话
        formDatas.append('id_card_number',this_.formData.id_card_number)//法人证件，即身份证号码
        formDatas.append('id_card_front_image_url',this_.formData.avatar)//身份证正面
        formDatas.append('id_card_back_image_url',this_.formData.avatar1)//身份证背面
        formDatas.append('business_image_url',this_.formData.avatar2)//营业执照
        formDatas.append('id_card_hand_image_url',this_.formData.avatar3)//手持身份证
        // formDatas.append('type',fruit)//申请类型：1个人（个人认证）,2企业（农庄入驻）,3生态村this.addressData
        formDatas.append('longitude',this.addressData[0])//经度
        formDatas.append('latitude',this.addressData[1])//纬度
        formDatas.append('alipay_Id',this_.formData.alipay)//支付宝账号
        formDatas.append('wx_Id',this_.formData.wechat)//微信账号
        //发送ajax请求
        this.$axios({
          method:"post",
          url: '/api/common/v1/farmLease/farmAdd',
          data:formDatas,
          headers: {
            'Content-Type':'multipart/form-data'
          }
        }).then(res=>{
          this.$toast(res.msg);
        }).catch(res=>{
          this.$toast(res.msg);
        })
      }
    },

    created:function () {
      setTitle('申请入驻')
    },
  }
</script>

<style scoped>
  @import '../../assets/css/index.css';
  .Merchant_add_con1_input{ display: inline-block;
    width: 56%!important;
    margin-right: 0.1rem;
  }
  .Merchant_add_con1_p2{ font-size: 0.14rem;text-align: right; display: inline-block;}
  .Merchant_add_con1_p2 i{font-size: 0.16rem;position: relative;top:0.03rem;}
  .xiala{width: 78%;float: right;overflow: hidden;}
  .xiala input{float: left; display: inline-block;
    font-size: 0.14rem;
    width: 85%;padding-left: 0.1rem;
    height: 0.4rem;
    border: 0;
    outline: none;}
  .xiala i{float: left;font-size: 0.2rem;margin-top: 0.1rem;}
  .p1{text-align: center;line-height: 0.4rem;background-color:#01bf47;}
  .yi{width: 100%;}
  .yi li{line-height: 0.2rem;padding:0.1rem 0.1rem;border-top: 1px solid #f2f2f2;}
  .mark {
    color: #01bf47;
  }
  .province,.city,.district{width: 100%;height: 3rem;}
  .province div,.city div,.district div{line-height: 0.3rem;border-bottom: 1px solid #f2f2f2;padding-left: 0.2rem}
  .nesAddress_select p{width: 75%;text-align: center}
  .nesAddress_select i{text-align: right;}
  .nesAddress01{width: 75%;
    font-size: 0.14rem;
    display: inline-block;
    height: 0.4rem;
    outline: none;
    border: 0;
    background-color: #fff;color: #01bf47;
  }
  .xiala p{ color: #01bf47;padding: 0.01rem 0 0 0;}
</style>
